<template>
  <div class="main">
    <el-row>
      <div style="align-content: center;">
			<span style="font-family: '华文行楷';">
				<h1>宏升酒店点餐管理系统</h1>
			</span>
        <hr />
        <div class="grid-content bg-purple" style="width: 300px; margin: auto; ">

          <el-form  :model="user" :rules="rules" ref="user">
            <el-form-item style="font-family: '华文行楷'; font-size: 20px;" label="账号:" prop="username">
              <el-input v-model="user.username" maxlength="5" show-word-limit clearable></el-input>
            </el-form-item>
            <el-form-item style="font-family: '华文行楷'; font-size: 20px;" label="密码:"  prop="password">
              <el-input v-model="user.password" maxlength="10" show-word-limit type="password" clearable  show-password ></el-input>
            </el-form-item>
            <el-form-item v-model="user.sex" style="font-family: '华文行楷'; font-size: 20px;" label="性别:" prop="sex">
              <el-radio v-model="user.sex"  label="男"  >男</el-radio>
              <el-radio v-model="user.sex"  label="女" >女</el-radio>
            </el-form-item>
            <el-form-item style="font-family: '华文行楷'; font-size: 20px;" label="电话号码:"  prop="telnumber">
              <el-input v-model="user.telnumber" clearable  onkeyup="this.value=this.value.replace(/\D/g,'')" maxlength="11"></el-input>
            </el-form-item>
            <el-button  @click="register('user')">注册 &nbsp; </el-button>
            <el-button  @click="tologin()">前往登陆 &nbsp; </el-button>
          </el-form>
        </div>
      </div>
    </el-row>

  </div>

</template>
<script>
  import {regist} from "@/network/form"

  export default {
    data() {
      return {
        labelPosition: 'left',
        radio: '1',
        user: {
          username: '',
          password: '',
          sex: 1,
          telnumber: ''
        },
        rules: {
          username: [
            {required: true, message: '请输入账号', trigger: 'blur'},
            {min: 0, max: 10, message: '长度在 0 到 10 个字符', trigger: 'blur'}
          ],
          password: [
            {required: true, message: '请输入密码', trigger: 'blur'},
            { min: 6, max: 12 , message: '请输入6-12位的密码', trigger: 'blur'}
          ],
          telnumber: [
            {required: true, message: '请输入电话号码', trigger: 'blur'},
            { min: 11, max: 11 , message: '请输入11位电话号码', trigger: 'blur'}
          ]
        }
      };
    },
    methods: {
      tologin() {
        this.$router.push('/form/login')
      },
      register (user) {
        this.$refs[user].validate((valid) =>{
          if (valid){
            regist (this.user).then(res => {
              if (res.success){
                this.$notify({
                  title: '成功',
                  message: '注册成功',
                  type: 'success'
                });
              } else {
                this.$notify({
                  title: '失败',
                  message: res.data.data,
                  type: 'warning'
                });
              }
          })
        } else {
            return false;
          }

        });
      }

    }
  }
</script>

<style scoped>
  .main {
    background-color: beige;
    height: 950px;
  }

</style>
